<template>
  <div class="dashboard-container" id="member-app">
    <div class="container">
      <div class="tableBar">
        <el-input
            v-model="input"
            placeholder="请输入员工姓名"
            style="width: 250px"
            clearable
            @keyup.enter="handleQuery"
        >
          <template #prefix>
            <i class="el-input__icon el-icon-search" style="cursor: pointer" @click="handleQuery"></i>
          </template>
        </el-input>
        <el-button type="primary" @click="addMemberHandle('add')">+ 添加员工</el-button>
      </div>

      <el-table :data="tableData" stripe class="tableBox">
        <el-table-column prop="name" label="员工姓名"></el-table-column>
        <el-table-column prop="username" label="账号"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column label="账号状态">
          <template #default="scope">
            {{ scope.row.status === '0' ? '已禁用' : '正常' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template #default="scope">
            <el-button
                type="text"
                size="small"
                class="blueBug"
                @click="addMemberHandle(scope.row.id)"
                :class="{ notAdmin: user !== 'admin' }"
            >
              编辑
            </el-button>
            <el-button
                v-if="user === 'admin'"
                type="text"
                size="small"
                class="delBut non"
                @click="statusHandle(scope.row)"
            >
              {{ scope.row.status === '1' ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          class="pageList"
          :page-sizes="[2]"
          v-model:page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          v-model:current-page="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getMemberList, enableOrDisableEmployee } from '@/api/member'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

// 数据定义
const input = ref('')
const page = ref(1)
const pageSize = ref(2)
const tableData = ref([])
const counts = ref(0)
const user = ref('')

// 初始化数据
const init = async () => {
  const params = {
    page: page.value,
    pageSize: pageSize.value,
    name: input.value || undefined
  }

  try {
    const res = await getMemberList(params)
    if (res.code === 1) {
      tableData.value = res.data.records || []
      counts.value = res.data.total
    }
  } catch (err) {
    ElMessage.error('请求出错了：' + err)
  }
}

// 搜索事件
const handleQuery = () => {
  page.value = 1
  init()
}

// 添加/编辑员工
const addMemberHandle = (st) => {
  if (st === 'add') {
    router.push('/employee/save')
  } else {
    router.push(`/employee/save?id=${st}`)
  }
}


// 状态切换
const statusHandle = async (row) => {
  const id = row.id
  const status = row.status

  try {
    await ElMessageBox.confirm('确认调整该账号的状态?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await enableOrDisableEmployee({ id, status: status === '1' ? 0 : 1 })
    ElMessage.success('账号状态更改成功！')
    handleQuery()
  } catch (err) {
    ElMessage.error('请求出错了：' + err)
  }
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  init()
}

const handleCurrentChange = (val) => {
  page.value = val
  init()
}

// 页面加载
onMounted(() => {
  const userInfo = localStorage.getItem('userInfo')
  if (userInfo) {
    user.value = JSON.parse(userInfo).username
  }
  init()
})
</script>

<style scoped>
#member-app .notAdmin::after {
  border: 0 !important;
}
</style>
